<!--
-->
<template>
    <vxe-modal v-model="visible" :position="{top: '60px'}" :title="title" destroy-on-close  :min-width="layout.modalMinWidth(800)" resize show-footer show-maximize :width="layout.modalWidth(800)" transfer :height="layout.modalHeight()" @close="cancelClick">
        <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="120px">
            <el-form-item :style="layout.col1" label="触发器描述" prop="description">
                <el-input v-model="state.model.description"/>
            </el-form-item>
            <el-form-item :style="layout.col2" label="起始时间" prop="startTime">
                <el-date-picker v-model="state.model.startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss" style="width: 100%"/>
            </el-form-item>
            <el-form-item :style="layout.col2" label="结束时间" prop="endTime">
                <el-date-picker v-model="state.model.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss" style="width: 100%"/>
            </el-form-item>
            <el-form-item :style="layout.col2" label="Cron公式" prop="strCron">
                <el-input v-model="state.model.strCron"/>
            </el-form-item>
            <el-form-item :style="layout.col2" label="公式类型" prop="cronType">
                <el-select v-model="state.model.cronType" filterable style="width: 100%">
                    <el-option v-for="item in state.cronList" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col2" label="最大运行次数" prop="maxNumberOfRuns">
                <el-input-number :min="0" v-model="state.model.maxNumberOfRuns"/>
            </el-form-item>
            <el-form-item :style="layout.col2" label="最大错误次数" prop="maxNumberOfErrors">
                <el-input-number :min="0" v-model="state.model.maxNumberOfErrors"/>
            </el-form-item>
            <el-form-item :style="layout.col2" label="重试次数" prop="numRetries">
                <el-input-number :min="0" v-model="state.model.numRetries"/>
            </el-form-item>
            <el-form-item :style="layout.col2" label="重试时间间隔" prop="retryTimeout">
                <el-input-number :min="0" v-model="state.model.retryTimeout" style="width: 80%"/><span style="padding-left: 10px">毫秒</span>
            </el-form-item>
            <el-form-item :style="layout.col2" label="立即启动" prop="startNow">
                <el-switch v-model="state.model.startNow"/>
            </el-form-item>
            <el-form-item :style="layout.col2" label="启动立即执行" prop="runOnStart">
                <el-switch v-model="state.model.runOnStart"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "../api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {
        jobId: "",
        strCron: null,
        cronType: null,
        description: null,
        startTime: null,
        endTime: null,
        maxNumberOfRuns: null,
        maxNumberOfErrors: null,
        numRetries: null,
        retryTimeout: 1000,
        startNow: true,
        runOnStart: true,
        resetOnlyOnce: true,
        triggerId: "",
    }
}
state.cronList = [
    { name: "分 时 天 月 周", value: 0 },
    { name: "分 时 天 月 周 年", value: 1 },
    { name: "秒 分 时 天 月 周", value: 2 },
    { name: "秒 分 时 天 月 周 年", value: 3 },
]

// 校验规则
const rules = computed(() => {
    return {
        description: [{ required: true, message: "请输入触发器名称" }],
        strCron: [{ required: true, message: "请输入Cron 公式" }],
        cronType: [{ required: true, message: "请设置Cron 公式类型" }],
        startTime: [{ required: true, message: "请设置开始时间" }],
        endTime: [{ required: true, message: "请设置开始时间" }],
    }
})

// 自定义校验规则
const customRules = {
    // pid: (rule, value, callback) => {
    //     if (state.model.type > 0) {
    //         if (!value) return callback(new Error("请选择上级菜单"));
    //     }
    //     return true;
    // },
};

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据

}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {...state.model}
    body.startTime = $dayjs(body.startTime).format("YYYY-MM-DDTHH:mm:ss")
    body.endTime = $dayjs(body.endTime).format("YYYY-MM-DDTHH:mm:ss")
    const {success, data} = await api[state.model.triggerId ? 'UpdateTaskJobTrigger' : 'AddTaskJobTrigger'](body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.EditForm {

}
</style>
